<template>
    <div class="BrowseView" v-if="isShow">
        <img class="imgEl" v-if="type==1" :src="url" alt="" />
        <video class="videoEl" v-else :src="url" controls autoplay></video>
        <span class="el-icon-error close" @click="onHide"></span>
    </div>
</template>

<script>
export default {
    name: 'BrowseView',
    data() {
        return {
            isShow: false,
            url: '',
            type: 1, //1图片 2视频
        }
    },
    methods: {
        onShow(info)  {
            if(!info) return; 
            let {type, url} = info
            this.type = type
            this.url = url
            this.isShow = true
        },
        onHide() {
            this.isShow = false
            this.url = ""
            this.type = 1;
        }
    }
}
</script>

<style lang="scss" scoped>
.BrowseView{
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    box-sizing:border-box;
    justify-content: center;
    align-items: center;
    z-index: 9;
    background: rgba(0,0,0,0.7);
    .imgEl{
        max-width: 100%;
        max-height: 100%;
    }
    .videoEl{
        width: 80%;
        height: 80%;
    }
    .close{
        font-size: 50px;
        color: rgba(255,255,255, 0.7);
        position: absolute;
        right: 20px;
        top: 110px;
        &:hover{
            color: rgba(255,255,255,1)
        }
    }
}
</style>